<template>
  <div class="right-block1">
    <div class="data-title">
      安全监测
    </div>
    <div class="display-flex">
      <div class="box1 no-borderb" style="padding: 0">
        <div class="safe-block clearfix">
          <div class="left">
            <i class="iconfont icon-huapo" />
            <p class="txt">
              滑坡
            </p>
          </div>
          <div class="right">
            <el-form label-width="110px" label-suffix=":">
              <el-form-item label="含水量A/B">
                <label class="data">{{ waterContentA }}/{{ waterContentB }}</label>
              </el-form-item>
              <el-form-item label="倾斜角度A/B">
                <label class="data"> {{ inclinationA }}/{{ inclinationB }}</label>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="safe-block clearfix" style="border-top: 1px solid rgba(92, 213, 200, 0.2); padding-top: 15px; margin-top: 10px">
          <div class="left" style="padding-top: 0">
            <i class="iconfont icon-touxiang" />
          </div>
          <div class="right">
            <el-form label-width="110px" label-suffix=":">
              <el-form-item label="作业现场人数">
                <label class="data">{{ sceneCount}}</label>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="box1 no-borderb" style="padding: 0">
        <div class="safe-block clearfix">
          <div class="left" style="padding-left: 13px">
            <i class="iconfont icon-loudian" />
            <p class="txt">
              漏电
            </p>
          </div>
          <div class="right">
            <el-form ref="form" label-width="80px" label-suffix=":">
              <el-form-item label="焊机01">
                <label class="data">{{ LeakageA0 }}mA</label>
              </el-form-item>
              <el-form-item label="焊机02">
                <label class="data">{{ LeakageA2 }}mA</label>
              </el-form-item>
              <el-form-item label="加热器">
                <label class="data">{{ LeakageA3 }}mA</label>
              </el-form-item>
              <el-form-item label="发电机">
                <label class="data">{{ LeakageA4 }}mA</label>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postHandle } from '@/api'
import AutoRefreshMixin from '../mixin/AutoRefreshMixin'

export default {
  name: 'SafetyMonitoring',
  mixins: [AutoRefreshMixin],
  data() {
    return {
      waterContentA: 0,
      waterContentB: 0,
      inclinationA: 0,
      inclinationB: 0,
      displacementA: 0,
      LeakageA0: 0,
      LeakageA2: 0,
      LeakageA3: 0,
      LeakageA4: 0,
      sceneCount: 0,
      entrance: 0,
      leave: 0
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    }
  },
  watch: {
    deviceList(val) {
      if (val && val.length > 0) {
        this.autoRefreshHandle()
      }
    }
  },
  created() {
    this.getPeopleNumber()
    this.getDevice()
  },
  beforeDestroy() {
    clearInterval(this.n)
  },
  methods: {
    refreshHandle() {
      this.getData()
    },
    getDevice() {
      postHandle('/api/v1/welder-sbtx-second/gateway-equipment-comb/list', {
        d: {
          filters: [
            { field: 'spaceId', operator: 'EQUALS', value: this.spaceId },
            { field: 'gatewayType', operator: 'IN', values: ['LANDSLIDE', 'LEAKAGE', 'PERSONNEL'] }
          ]
        }
      }).then(res => {
        this.deviceList = res.result
        this.autoRefreshHandle()
      })
    },
    getData() {
      // postHandle('/ekjdTest/api/HJDatas', { 'geteWay_code': this.deviceList.map(item => item.gateway.gatewayCode) }).then(res => {
      //   if (res) {
      //     let data = res.result
      //     this.deviceList.forEach(item => {
      //       if (item.gatewayType === 'LANDSLIDE') {
      //         let o = data.find(d => d.geteWay_code === item.gateway.gatewayCode)
      //         if (o) {
      //           this.waterContentA = o.waterContentA
      //           this.waterContentB = o.waterContentB
      //           this.inclinationA = o.inclinationA
      //           this.inclinationB = o.inclinationB
      //         }
      //       }
      //       if (item.gatewayType === 'LEAKAGE') {
      //         let o = data.find(d => d.geteWay_code === item.gateway.gatewayCode)
      //         if (o) {
      //           this.LeakageA0 = o.LeakageA1 ? o.LeakageA1 : 0
      //           this.LeakageA2 = o.LeakageA2 ? o.LeakageA2 : 0
      //           this.LeakageA3 = o.LeakageA3 ? o.LeakageA3 : 0
      //           this.LeakageA4 = o.LeakageA4 ? o.LeakageA4 : 0
      //         }
      //       }
      //       if (item.gatewayType === 'PERSONNEL') {
      //         let o = data.find(d => d.geteWay_code === item.gateway.gatewayCode)
      //         if (o) {
      //           this.entrance = o.entrance ? o.entrance : 0
      //           this.leave = o.leave ? o.leave : 0
      //         }
      //       }
      //     })
      //   }
      // })
    },
    getPeopleNumber(){
      postHandle('/api/v1/welder-sbtx-second/hj-member-comb/people-number',{
        d:{},
        obj:{
          spaceId: this.spaceId
        }
      }).then(res => {
        this.sceneCount = res.result.sceneCount
      })
    }
  }
}
</script>

<style scoped>
.right-block1 .data {
    font-size: 24px;
}
</style>
